import React, {Component} from 'react';

/*
    2.有时可能需要在组件中有多个入口，这种情况下可以使用自己约定的属性而不是 children：
*/

function Contacts() {
    return (
        <span>
            -我是Contacts-
        </span>
    );
}

function Chat() {
    return (
        <span>
            -我是Chat-
        </span>
    )
}

function SplitPane(props) {
    return (
        <div>
            {props.left}
            
            {props.right}
        </div>
    );
}

function Apps() {
    return (
        <SplitPane
            left={
                <Contacts />
            }
            right={
                <Chat />
            } />
    );
}

/*
    3有时我们认为组件是其他组件的特殊实例。例如，我们会说 WelcomeDialog 是 Dialog 的特殊实例。

    在 React 中，这也是通过组合来实现的，通过配置属性用较特殊的组件来渲染较通用的组件。
*/

function Dialog(props) {
    return (
        <div>
            <h1>
                {props.title}
            </h1>
            <p>
                {props.message}
            </p>
        </div>
    );
}

function WelcomeDialog() {
    return (
        <Dialog
            title="特殊实例"
            message="一些组件可能是其他组件的特殊实例" />

    );
}

class CompositionAndInheritance2 extends Component {
    render(){
        return (
            <div>
                我是CompositionAndInheritance2组件
                <br/>
                <Apps/>
                <br/>
                <WelcomeDialog/>
            </div>
        )
    }
}
export default CompositionAndInheritance2;